<!DOCTYPE html>
<html class="x-admin-sm">
    
    <head>
        <meta charset="UTF-8">
        <title>充值商户后台</title>
        <meta name="renderer" content="webkit|ie-comp|ie-stand">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <meta http-equiv="Cache-Control" content="no-siteapp" />
        <link rel="stylesheet" href="../static/x-admin/css/font.css">
        <link rel="stylesheet" href="../static/x-admin/css/xadmin.css">
        <!-- <link rel="stylesheet" href="./css/theme5.css"> -->
        <script src="../static/x-admin/lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="../static/x-admin/js/xadmin.js"></script>
        <script type="text/javascript" src="../static/js/jquery-3.5.1.min.js"></script>
        <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
        <!--[if lt IE 9]>
        <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
        <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    
    <body>
        <div class="layui-fluid">
            <div class="layui-card">
                <div class="layui-card-header"><b>配置模板</b></div>
                <div class="layui-card-body">
                    <div class="layui-row">
                        <form class="layui-form" action="">
                            <div class="layui-collapse">
                                <div class="layui-colla-item">
                                    <h1 class="layui-colla-title">基础配置</h1>
                                    <div class="layui-colla-content layui-show">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label"><strong>模板名称</strong></label>
                                            <div class="layui-input-inline">
                                                <input type="text" name="scale-templete-name" required lay-verify="required" autocomplete="off" class="layui-input">
                                            </div>
                                            <div class="layui-form-mid layui-word-aux">取名保证唯一性</div>
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label"><strong>用户标识</strong></label>
                                            <div class="layui-input-inline">
                                                <input type="text" name="scale-user-name" required lay-verify="required" autocomplete="off" class="layui-input">
                                            </div>
                                            <div class="layui-form-mid layui-word-aux">可填写角色名、或者角色ID；不可为空</div>
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label"><strong>用户标识提示</strong></label>
                                            <div class="layui-input-inline">
                                                <input type="text" name="scale-user-name-point" required lay-verify="required" placeholder="如：通过角色属性面板查看角色ID" autocomplete="off" class="layui-input">
                                            </div>
                                            <div class="layui-form-mid layui-word-aux">此提示会在充值页面显示，提示玩家如何查看用户标识</div>
                                        </div>

                                        <div class="layui-form-item">
                                            <label class="layui-form-label"><strong>金额类型</strong></label>
                                            <div class="layui-input-block">
                                                <input type="radio" lay-filter="money-type-filter" name="money-type" value="any-money" title="任意金额" checked>
                                                <input type="radio" lay-filter="money-type-filter" name="money-type" value="fixed-money-type" title="固定金额">
                                            </div>
                                        </div>


                                        <!-- 任意金额的样式 -->
                                        <div id="any-money-style">
                                            <div class="layui-form-item">
                                                <label class="layui-form-label"><strong>游戏币名称</strong></label>
                                                <div class="layui-input-inline">
                                                    <input type="text" name="game-money-name" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
                                                </div>
                                                <div class="layui-form-mid layui-word-aux">默认是元宝，也可以是钻石、点券</div>
                                            </div>

                                            <div class="layui-form-item">
                                                <label class="layui-form-label"><strong>游戏币比例</strong></label>
                                                <div class="layui-input-inline">
                                                    <input type="text" name="game-money-scale" required lay-verify="required" autocomplete="off" class="layui-input">
                                                </div>
                                                <div class="layui-form-mid layui-word-aux">默认是100，既充值1元人命币转为100游戏币</div>
                                            </div>

                                            <div class="layui-form-item">
                                                <label class="layui-form-label"><strong>最低充值金额</strong></label>
                                                <div class="layui-input-inline">
                                                    <input type="text" name="limit-low-money" required lay-verify="required" autocomplete="off" class="layui-input">
                                                </div>
                                                <div class="layui-form-mid layui-word-aux">默认最低为10元</div>
                                            </div>
                                        </div>

                                        <!-- 固定金额的样式-->
                                        <div id="fixed-money-style" class="layui-row" style="margin-left: 40px;">
                                            <div class="layui-form-item">
                                                <div class="layui-col-md1" style="margin-left: 10px;">
                                                    <input type="text" name="limit-low-money" required lay-verify="required" placeholder="售价（元）" autocomplete="off" class="layui-input">
                                                </div>
                                                <div class=" layui-col-md2" style="margin-left: 10px;">
                                                    <input type="text" name="limit-low-money" required lay-verify="required" placeholder="商品名称" autocomplete="off" class="layui-input">
                                                </div>
                                                <div class="layui-col-md2" style="margin-left: 10px;">
                                                    <input type="text" name="limit-low-money" required lay-verify="required" placeholder="商品编号" autocomplete="off" class="layui-input">
                                                </div>
                                                <div class="layui-col-md1" style="margin-left: 10px;">
                                                    <input type="text" name="limit-low-money" required lay-verify="required" placeholder="可够次数" autocomplete="off" class="layui-input">
                                                </div>
                                                <div class="layui-inline" style="margin-left: 10px;">
                                                    <div class="layui-btn layui-btn-danger fixed-money-child-del"><i class="layui-icon layui-icon-delete">删除</i> </div>
                                                </div>
                                            </div>

                                            <div id="fixed-money-child-style"></div>

                                            <div class="layui-btn" style="margin-left: 10px;" onclick="addFixedMoenyStyle();"><i class="layui-icon layui-icon-add-circle">添加商品</i></div>
                                            <div style="color: red; margin-left: 10px;"><h3><p>说明：请根据游戏内设置的商品道具进行设置，切勿乱填</p><p>可购次数填0代表不限，填1代表一个帐号仅可购买一次，依此类推</p></h3></div>
                                        </div>

                                    </div>
                                </div>


                                <div class="layui-colla-item">
                                    <h1 class="layui-colla-title">激励赠送</h1>
                                    <div class="layui-colla-content layui-show">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label"><strong>赠送方式</strong></label>
                                            <div class="layui-input-block">
                                                <input type="radio" lay-filter="present-type-filter" name="present-type" value="close-present" title="关闭" checked>
                                                <input type="radio" lay-filter="present-type-filter" name="present-type" value="fixed-money-present" title="固定金额赠送">
                                                <input type="radio" lay-filter="present-type-filter" name="present-type" value="fscale-present" title="按百分比赠送">
                                            </div>
                                        </div>

                                        <!-- 按金额赠送-->
                                        <div id="present-type-money-style">
                                            <div class="layui-form-item">
                                                <label class="layui-form-label"><strong>充值：</strong></label>
                                                <div class="layui-input-inline">
                                                    <input type="text" name="scale-user-name" required lay-verify="required" placeholder="金额（元）" autocomplete="off" class="layui-input">
                                                </div>
                                                <div class="layui-input-inline">
                                                    <input type="text" name="scale-user-name" required lay-verify="required" placeholder="赠送金额（元）" autocomplete="off" class="layui-input">
                                                </div>
                                                <div class="layui-inline">
                                                    <div class="layui-btn layui-btn-danger fixed-money-child-del"><i class="layui-icon layui-icon-delete">删除</i></div>
                                                </div>
                                            </div>
                                            <div id="present-type-money-child-style"></div>
                                            <div class="layui-btn" style="margin-left: 50px;" onclick="addPresentTypeMoneyStyle();"><i class="layui-icon layui-icon-add-circle"></i>添加</div>
                                        </div>

                                        <!-- 按百分比赠送-->
                                        <div id="present-type-scale-style">
                                            <div class="layui-form-item">
                                                <label class="layui-form-label"><strong>充值：</strong></label>
                                                <div class="layui-input-inline">
                                                    <input type="text" name="scale-user-name" required lay-verify="required" placeholder="金额（元）" autocomplete="off" class="layui-input">
                                                </div>
                                                <div class="layui-input-inline">
                                                    <input type="text" name="scale-user-name" required lay-verify="required" placeholder="赠送比例（%）" autocomplete="off" class="layui-input">
                                                </div>
                                                <div class="layui-inline">
                                                    <div class="layui-btn layui-btn-danger fixed-money-child-del"><i class="layui-icon layui-icon-delete">删除</i></div>
                                                </div>
                                            </div>
                                            <div id="present-type-scale-child-style"></div>
                                            <div class="layui-btn" style="margin-left: 50px;" onclick="addPresentTypeScaleStyle();"><i class="layui-icon layui-icon-add-circle"></i>添加</div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </form>
                    </div>
                    <div class="layui-form-item">
                        <br>
                        <button class="layui-btn" lay-filter="add">保存/添加</button>
                        <button class="layui-btn layui-btn-danger" lay-filter="back" lay-submit="">返回当前页</button>
                    </div>
                </div>
            </div>
        </div>
{{/*        </div>*/}}
        <script>

            // 动态添加固定金额赠送input框
            function addPresentTypeMoneyStyle() {
                let str = '<div class="layui-form-item"><label class="layui-form-label"><strong>充值：</strong></label><div class="layui-input-inline">' +
                    '<input type="text" name="scale-user-name" required lay-verify="required" placeholder="金额（元）" autocomplete="off" class="layui-input"></div><div class="layui-input-inline">' +
                    '<input type="text" name="scale-user-name" required lay-verify="required" placeholder="赠送金额（元）" autocomplete="off" class="layui-input">' +
                    '</div><div class="layui-inline"><div class="layui-btn layui-btn-danger fixed-money-child-del"><i class="layui-icon layui-icon-delete">删除</i></div></div></div>';

                $("#present-type-money-child-style").append(str);
            }

            // 动态添加按百分比赠送input框
            function addPresentTypeScaleStyle() {
                let str = '<div class="layui-form-item"><label class="layui-form-label"><strong>充值：</strong></label><div class="layui-input-inline">' +
                    '<input type="text" name="scale-user-name" required lay-verify="required" placeholder="金额（元）" autocomplete="off" class="layui-input">' +
                    '</div><div class="layui-input-inline"><input type="text" name="scale-user-name" required lay-verify="required" placeholder="赠送比例（%）" autocomplete="off" class="layui-input">' +
                    '</div><div class="layui-inline"><div class="layui-btn layui-btn-danger fixed-money-child-del"><i class="layui-icon layui-icon-delete">删除</i></div></div></div>';

                $("#present-type-scale-child-style").append(str);
            }

            // 动态添加固定金额的input输入框
            function addFixedMoenyStyle() {
                let str = '<div class="layui-form-item">' +
                    '<div class="layui-col-md1" style="margin-left: 10px;">' +
                    '<input type="text" name="limit-low-money" required lay-verify="required" placeholder="售价（元）" autocomplete="off" class="layui-input">' +
                    '</div><div class=" layui-col-md2" style="margin-left: 10px;">' +
                    '<input type="text" name="limit-low-money" required lay-verify="required" placeholder="商品名称" autocomplete="off" class="layui-input">' +
                    '</div><div class="layui-col-md2" style="margin-left: 10px;">' +
                    '<input type="text" name="limit-low-money" required lay-verify="required" placeholder="商品编号" autocomplete="off" class="layui-input">' +
                    '</div><div class="layui-col-md1" style="margin-left: 10px;"><input type="text" name="limit-low-money" required lay-verify="required" placeholder="可够次数" autocomplete="off" class="layui-input">' +
                    '</div><div class="layui-inline" style="margin-left: 10px;">' +
                    '<div class="layui-btn layui-btn-danger fixed-money-child-del"><i class="layui-icon layui-icon-delete"> 删除</i></div></div></div>';


                $("#fixed-money-child-style").append(str);
            }

            // 删除固金额input
            $("div").on('click', '.fixed-money-child-del', function () {
                $(this).parent().parent().remove();
            })


            layui.use(['form', 'layer', 'element'], function() {
                // 启动element木块
                let element = layui.element;
                $ = layui.jquery;
                var form = layui.form,
                layer = layui.layer;
                // 进入该页面首先做的事情
                $(document).ready(function () {
                    $("#fixed-money-style").toggle();
                    $("#present-type-money-style").hide();
                    $("#present-type-scale-style").hide();
                })

                //自定义验证规则
                form.verify({
                    nikename: function(value) {
                        if (value.length < 5) {
                            return '昵称至少得5个字符啊';
                        }
                    },
                    pass: [/(.+){6,12}$/, '密码必须6到12位'],
                    repass: function(value) {
                        if ($('#L_pass').val() != $('#L_repass').val()) {
                            return '两次密码不一致';
                        }
                    }
                });

                // 监听赠送类型的radio
                form.on('radio(present-type-filter)', function (data) {
                    let radioValue = data.value;
                    if ("close-present" === radioValue) {
                        $("#present-type-money-style").hide();
                        $("#present-type-scale-style").hide();
                    } else if ("fixed-money-present" === radioValue) {
                        $("#present-type-money-style").show();
                        $("#present-type-scale-style").hide();
                    } else if ("fscale-present" === radioValue) {
                        $("#present-type-money-style").hide();
                        $("#present-type-scale-style").show();
                    }
                 })

                // 监听金额类型的radio
                form.on('radio(money-type-filter)', function (data) {
                    let value = data.value;
                    if ("any-monty" === value) {
                        //处理任何金额
                        $("#any-money-style").toggle();
                        $("#fixed-money-style").toggle();
                    } else {
                        // 处理固定金额
                        $("#any-money-style").toggle();
                        $("#fixed-money-style").toggle();
                    }
                })


                //监听提交
                form.on('submit(add)', function(data) {
                    console.log(data);
                    //发异步，把数据提交给php
                    layer.alert("增加成功", {
                        icon: 6
                    },
                    function() {
                        // 获得frame索引
                        var index = parent.layer.getFrameIndex(window.name);
                        //关闭当前frame
                        parent.layer.close(index);
                    });
                    return false;
                });

                form.on('submit(back)',
                    function () {
                        window.history.back(-1);
                    });
            });
        </script>

    </body>

</html>